<template>
    <div>
        <div class="flex" >
            <div>选择打印纸张：</div>
            <a-radio-group v-model="prinType" :options="prinOptions" ></a-radio-group>
        </div>
        <div class="scllo">
            <div id="tihuoContent">
                <div class="box" v-for="(item,index) in list" :key="index" :style="{height:prinType == 1?'297mm':prinType == 2?'148.5mm':'100mm',width:prinType == 1?'210mm':prinType == 2?'240mm':'240mm',padding: prinType == 1?'10mm':'10mm 24mm'}">
                    <div class="flex justify_center" style="font-size: 16px;font-weight: 600;">四川威斯腾物流有限公司</div>
                    <div class="flex justify_center" style="font-size: 16px;font-weight: 600;margin-bottom: 6px;">提货签收单</div>
                    
                    <div class="flex justify_between" style="margin-bottom: 8px;">
                        <div>提货人名称：{{deptName}}</div>
                        <div>{{props.process_time}}</div>
                    </div>
                    <div class="border" style="margin-bottom: 4px;">
                        <div class="flex ">
                            <div class="padd12 bor_r bor_b center" style="width: 80px;">
                                <div>序号</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 140px;">
                                <div>运单号</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>品名</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>车号(箱号)</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                <div>件数</div>
                            </div>
                            <div class="padd12  bor_b center" style="width: 100px;">
                                <div>重量</div>
                            </div>
                            
                            <!-- {{list[0].goods_data[0]}} -->
                            
                        </div>
                        <div class="flex " v-for="(ite,ind) in item" :key="index"> 
                            <div class="padd12 bor_r bor_b center" style="width: 80px;">
                                <div>{{ind + 1}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 140px;">
                                <div>{{ite.prediction.yundanhao}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>{{ite.prediction.goods_name}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" style="width: 140px;">
                                <div>{{props.transport_type == 1?ite.prediction.box:ite.prediction.car_no}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                <div>{{ite.prediction.number}}</div>
                            </div>
                            <div class="padd12  bor_b center" style="width: 100px;">
                                <div>{{ite.prediction.weight}}</div>
                            </div>
                        </div>
                        <!-- <div class="flex ">
                            <div class="padd12 bor_r  center" style="width: 80px;">
                                <div>备注</div>
                            </div>
                            <div class="padd12   center flex_1" >
                                <div></div>
                            </div>
                        </div> -->
                    </div>
                    <div class="flex justify_between" style="margin-bottom: 8px;">
                        <div>制单员：{{ props.user.nickname }}</div>
                        <div>打印员：</div>
                        <div>客户签字：</div>
                        <div>货物交付时，如未提出异议，视为完好签收</div>
                    </div>
                    <div class="flex justify_center" >
                        <div>(第一联留存联，第二联客户联，第三联提货联)</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;" class="flex justify_end">
            <a-button  type="primary" @click="showCount = true">打印</a-button>
        </div>
        <a-modal :mask-closable="false" 
            v-model:visible="showCount"
            width="600px"
            title="提示"
            ok-text="打印"
            :footer="false"
        >
            <div class="flex justify_center align_center" style="height: 100px;">
                <div>已打印{{count}}次，确定打印？</div>
            </div>
            <div class="flex justify_end">
                <a-button v-print="printObj" type="primary">打印</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
 import { defineProps, defineEmits, ref, reactive, onMounted,watch } from "vue";
 import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
 import tool from '@/utils/tool'
 const props = defineProps({
    row:Array,
    user:Object,
    deptName:String,
    pick_typeid:Number,
    process_time:String,
    transport_type:Number,
 })
 const type = ref('1')    // 1 集装箱   2 整车
 const list = ref([])
 const count = ref(0)
 const prinType = ref('1')   // 1 A4纸   2 1/2A4纸  3 1/3 A4纸
 const lists = ref([])
 const prinOptions = ref([
      { label: 'A4纸', value: '1' },
      { label: '1/2 A4纸', value: '2' },
      { label: '1/3 A4纸', value: '3' },
 ])
 const showCount = ref(false)
 const printObj = {
    id: "tihuoContent",
    popTitle: "页面打印",
    openCallback: (vue) => {
        predictionDeriverOrder
            .getprintSave({ type: 5, link_id: props.row.id})
            .then((res) => {
                showCount.value = false
                handlegetCount()
            });
    },
 };
 const handlegetCount = () => {
    predictionDeriverOrder
       .getCount({ type: 5, link_id: props.row.id})
       .then((res) => {
            console.log(res)
            count.value = res.data.count
        }); 
 }
 const splitArray = (arr,type) =>{
    //  1  22  2  7   3 
    const result = [];
    let num = 0
    if(type == 1){
       num = 22 
    }else if(type == 2){
        num = 7
    }else if(type == 3){
        num = 3
    }
    for (let i = 0; i < arr.length; i += num) {
        result.push(arr.slice(i, i + num));
    }
    return result;
 }
 watch(
  prinType,
  (newVal, oldVal) => {
    list.value = splitArray(lists.value,newVal)
  }
  
)
 onMounted(()=>{
    lists.value = JSON.parse(JSON.stringify(props.row)).detail
    lists.value.map((v,i)=>{
        v.prediction.number = v.prediction.number_yu
        v.prediction.weight = v.prediction.weight_yu - 0
    })
    let newArr = splitArray(lists.value,prinType.value)
    list.value = newArr
    handlegetCount()
 })
</script>

<style lang="less" scoped>
.scllo{
    overflow-y: scroll;
    height: 700px;
    scrollbar-width: none;
}
.scllo::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
// 修改.box基础样式
.box{
    width: 242mm;
    height: 297mm;
    padding: 10mm 12mm;
    box-sizing: border-box;
    position: relative;
}
@media print {
    .box {
        margin-bottom: 0 !important;
        page-break-after: always !important;
    }
}
.page-break{
    page-break-before: always;
}
.logoImg{
    position: absolute;
    top: 10mm;
    width: 200px;
}
.border{
    border: 1px solid rgba(0,0,0,1);
    border-bottom: 0px solid rgba(0,0,0,1);
}
.bor_r{
    border-right: 1px solid rgba(0,0,0,1);
}
.bor_b{
    border-bottom: 1px solid rgba(0,0,0,1);
}
.padd12{
    padding: 3mm 10px;
    box-sizing: border-box;
}
.text_center{
    text-align: center;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>